<template>
	<el-form :model="form" label-width="120px">
		<el-form-item label="标题">
			<el-input v-model="form.title" />
		</el-form-item>
		<el-form-item label="姓名">
			<el-input v-model="form.name" />
		</el-form-item>
		<el-form-item label="类型">
			<el-select v-model="form.type">
				<el-option value="小说" label="小说"></el-option>
				<el-option value="财经" label="财经"></el-option>
				<el-option value="军事" label="军事"></el-option>
				<el-option value="政治" label="政治"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="图片">
			<el-upload class="avatar-uploader" :show-file-list="false" :on-success="handleAvatarSuccess" action="#"
				:before-upload="beforeAvatarUpload" :on-error="handleAvatarError">
				<img v-if="imageUrl" :src="imageUrl" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon">
					<Plus />
				</el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="作者">
			<el-input v-model="form.auther" />
		</el-form-item>
		<el-form-item label="邮箱">
			<el-input v-model="form.email" />
		</el-form-item>
		<el-form-item label="是否置顶">
			<el-checkbox v-model="form.isTop"></el-checkbox>
		</el-form-item>
		<el-form-item label="是否推荐">
			<el-checkbox v-model="form.isCommon"></el-checkbox>
		</el-form-item>
		<el-form-item label="是否使用">
			<el-checkbox v-model="form.isUse"></el-checkbox>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit">创建</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadFile } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()
// do not use same name with ref
const form = reactive({
	title: '',
	name: '',
	type: '',
	url: '',
	auther: '',
	email: '',
	createTime: '',
	isTop: false,
	isCommon: false,
	isUse: true,
})

const onSubmit = async () => {
	const resp = await axios.post('/api/lsit/add', form);
	router.push('/list')
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
	response,
	uploadFile
) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const handleAvatarError = (error: Error, uploadFile: UploadFile) => {
	const read = new FileReader()
	read.readAsDataURL(uploadFile.raw!)
	read.addEventListener('load', () => {
		form.url = read.result as string
		imageUrl.value = read.result as string
	})
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
	if (!rawFile.type.includes('image')) {
		ElMessage.error('Avatar picture must be format!')
		return false
	} else if (rawFile.size / 1024 / 1024 > 2) {
		ElMessage.error('Avatar picture size can not exceed 2MB!')
		return false
	}
	return true
}
</script>


<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
